<template>

    <van-cell-swipe :right-width="65" :on-close="closeItem">

        <div @click="openBrowser(guid)" class="file-cell-item van-hairline--bottom">
            <span class="file-type" :style="{backgroundColor:fileTypeColor}">{{fileType.toUpperCase()}}</span>
            <p class="file-name van-ellipsis">{{fileName}}</p>
            <span class="file-size">{{fileSize|filterSize}}</span>
            <i class="iconfont oa-jiantou"></i>
        </div>
        <span slot="right">
            <div class="btn-delete">
                删除
            </div>
        </span>
    </van-cell-swipe>
</template>

<script>

    import { Dialog } from 'vant'

    export default {
        name: "oa-file-item",
        props: {
            fileName: {
                type: String,
                default: "附件名"
            },
            fileType: {
                type:String,
                default:"png"
            },
            fileSize:{
                default:"0kb"
            },
            guid:{
                default:""
            }
        },
        data() {
            return {

                checked: false
            }
        },
        computed:{
            fileTypeColor(){
                switch (this.fileType.toUpperCase()){
                    case "PNG":
                        return "dodgerblue";
                    case "JPG":
                        return "orange";
                    case "XLSX":
                        return "darkgreen";
                    case "XLS":
                        return "darkgreen";
                    case "PPT":
                        return "orangered";
                    case "PPTX":
                        return "orangered";
                    case "DOC":
                        return "#267fdf";
                    case "DOCX":
                        return "#267fdf";
                    case "ZIP":
                        return "green";
                    case "RAR":
                        return "plum";
                    case "TEXT":
                        return "darkgray";
                    case "PDF":
                        return "red";
                    default:
                        return "#267fdf"
                }
            }
        },
        filters:{
            filterSize(value){
                // console.log(value)
                if(!isInteger(value)){
                   return value
                }else {
                    console.log(value)
                    if(value > 1024 && value < 1024 * 1024){
                        return (value / 1024).toFixed(2) + "kb"
                    }else if(value >= 1024* 1024) {
                        return (value / 1024* 1024).toFixed(2) + "mb"
                    }else {
                        return (value).toFixed(2) + "b"
                    }
                }
            }
        },
        methods:{
            openBrowser(item){
                let url = "/WorkFlowRuntime/Attachment/download?id=" + item
                window.open(url)
            },
            closeItem(clickPosition, instance){
                switch (clickPosition) {
                    case 'left':
                    case 'cell':
                        console.log("点击了cell")
                    case 'outside':
                        instance.close();
                        break;
                    case 'right':
                        Dialog.confirm({
                            message: '确定删除吗？'
                        }).then(() => {
                            this.$emit("deleteItem")
                            instance.close();
                        }).catch(()=>{
                            instance.close();
                        });
                        break;
                }
            }
        }
    }
</script>

<style scoped lang="less">

    .file-cell-item {
        height: 50px;
        display: flex;
        flex-direction: row;
        background: #ffffff;
        align-items: center;
        .file-type {
            margin-left: 16px;
            width: 44px;
            height: 44px;
            background: #267fdf;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            text-align: center;
        }
        .oa-jiantou {
            margin-left: auto;
            color: #999999;
            margin-right: 16px;
        }
        .file-name {
            color: #2f2f2f;
            font-size: 16px;
            max-width: 160px;
            margin-left: 16px;
        }
        .file-size {
            color: #ffad2a;
            font-size: 12px;
            margin-left: 10px;
            margin-top: 8px;

        }
    }

    .btn-delete {
        background: #ff3f17;
        color: #ffffff;
        height: 100%;
        width: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

</style>